<template>
  <div class="layout">
    <div class="header">
      <div class="logo">EasyJob管理后台</div>
      <div class="userinfo">
        欢迎回来，
        <el-dropdown>
          <span class="name">{{ userInfo.userName }}</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="updateMyPwd">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">
                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="body">
      <div class="left-sider">
        <!--    一级导航    -->
        <div class="menu-list">
          <div v-for="item in userInfo.menuList" @click="pMenuClickHandler(item)"
               :class="['menu-item',currentPMenu.menuUrl === item.menuUrl ? 'active': '']">
            <div :class="['iconfont','icon-'+item.icon]"></div>
            <div>{{ item.menuName }}</div>
          </div>
        </div>
        <!--    二级导航    -->
        <div class="menu-sub-list">
          <div v-for="item in currentPMenu.children"
               @click="subMenuClickHandler(item)"
               :class="['sub-item',currentSubMenu.menuUrl === item.menuUrl ? 'active': '']">
            <div>{{ item.menuName }}</div>
          </div>
        </div>
      </div>
      <div class="main-content">
        <!--  标签列表展示  -->
        <div class="tag-content">
          <el-tabs
              type="border-card"
              v-model="currentSubMenu.menuUrl"
              @tab-click="tabClick"
              @edit="editTab"
          >
            <el-tab-pane
                v-for="item in tabList"
                :name="item.menuUrl"
                :label="item.menuName"
                :closable="tabList.length>1"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="body-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, getCurrentInstance} from "vue";
import {useRouter, useRoute} from "vue-router";

const router = useRouter();
const route = useRoute();
const {proxy} = getCurrentInstance();

const userInfo = ref(JSON.parse(sessionStorage.getItem("userInfo"))) || {menuList: []}

const currentPMenu = ref({});
const currentSubMenu = ref({});

// 菜单初始化map数组
const menuMap = ref({});
const initMenuMap = () => {
  // 获取菜单数据
  const menuList = userInfo.value.menuList;
  for (let p = 0; p < menuList.length; p++) {
    const pMenu = menuList[p];
    menuMap.value[pMenu.menuUrl] = pMenu;
    for (let s = 0; s < pMenu.children.length; s++) {
      const subMenu = pMenu.children[s];
      subMenu["parentPath"] = pMenu.menuUrl
      menuMap.value[subMenu.menuUrl] = subMenu;
    }
  }
}

// 修改密码
const updateMyPwd = () => {
  alert("还未开发")
}
// 退出账号
const logout = () => {
  proxy.Confirm("你确定退出吗？",async () => {
    let result = await proxy.Request({
      url: "/logout"
    })
    if (!result){
      return;
    }
    sessionStorage.removeItem("userInfo");
    router.push("/login")
  });
}

// 点击一级菜单
const pMenuClickHandler = (data) => {
  currentPMenu.value = data;
  let firstSubMenu = data.children[0];
  // 跳转路由
  jump(firstSubMenu);

}
// 点击二级菜单
const subMenuClickHandler = (item) => {
  jump(item)
}
// 跳转路由
const jump = (data) => {
  if (currentSubMenu.value.menuUrl === data.menuUrl) {
    return;
  }
  router.push(`${data.menuUrl}`);
  currentSubMenu.value = data;
  editTabHandler(data);
}

// teb 的相关操作
const tabList = ref([]);
// 修改标签列表
const editTabHandler = (curMenu) => {
  if (tabList.value.length < 0) {
    tabList.value.push(curMenu);
    return;
  }
  let currentTab = tabList.value.find((item) => {
    return item.menuUrl === currentSubMenu.value.menuUrl;
  })
  // 不存在，添加进数组内
  if (!currentTab) {
    tabList.value.push(curMenu);
  }
}

const tabClick = (e) => {
  // 切换路由
  menuSelect(e.props.name);
  router.push(e.props.name);
}
// targetKey 点击修改的 name,action 操作
const editTab = (targetKey, action) => {
  if (action !== 'remove') {
    return;
  }
  let tabs = tabList.value;
  let curPath = currentSubMenu.value.menuUrl;
  // 删除的是当前路由
  if (curPath === targetKey) {
    tabs.forEach((tab, index) => {
      if (tab.menuUrl === targetKey) {
        let nextTab = tabs[index + 1] || tabs[index - 1];
        if (nextTab) {
          curPath = nextTab.menuUrl;
        }
      }
    })
  }
  // 过滤数据
  tabList.value = tabs.filter((tab) => tab.menuUrl !== targetKey);
  // 路由需要改变
  if (curPath !== currentSubMenu.value.menuUrl) {
    console.log(curPath)
    router.push(curPath);
    menuSelect(curPath);
  }

}

// 根据路由获取信息
const menuSelect = (curPath, editTab) => {
  let curMenu = menuMap.value[curPath];
  if (curMenu == null) {
    return;
  }
  currentPMenu.value = menuMap.value[curMenu.parentPath];
  currentSubMenu.value = curMenu;
  if (editTab) {
    editTabHandler(curMenu);
  }
}

onMounted(() => {
  initMenuMap();
  menuSelect(route.path, true)
})
</script>

<style lang="scss" scoped>
// 8:00
.layout {
  .header {
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .logo {
      color: #059EEB;
      font-weight: bold;
      font-size: 20px;
    }

    .userinfo {
      display: flex;
      align-items: center;
      margin-right: 50px;

      .name {
        color: #059EEB;
      }
    }
  }

  .body {
    display: flex;

    .left-sider {
      display: flex;

      .menu-list {
        height: calc(100vh - 60px);
        background: #000;
        color: #fff;

        .menu-item {
          height: 80px;
          width: 80px;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .active {
          background: #07A7FE;
        }
      }

      .menu-sub-list {
        width: 150px;
        padding: 5px;
        //border-right: 1px solid #ccc;
        box-shadow: 1px 0 5px #ddd;

        .sub-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 30px;
          padding-left: 10px;
          margin-bottom: 10px;
          cursor: pointer;
        }

        .active {
          background: #E9F4FF;
          border-radius: 5px;
          color: #059EEB;
        }
      }
    }
  }

  .main-content {
    flex: 1;

    .tag-content {
      background: #E1E3E6;
    }

    .body-content {
      padding: 10px;
      background: #F6F6F6;

      height: calc(100vh - 101px);
    }
  }
}

:deep(.el-tabs__content) {
  padding: 0px !important;
}

</style>
